import 'package:ceo_app/api/index.dart';
import 'dart:ui';
import 'package:ceo_app/page/personal/underlineTabIndicator.dart';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class Personal extends StatefulWidget {
  const Personal({super.key});

  @override
  State<Personal> createState() => _PersonalState();
}

class _PersonalState extends State<Personal>
    with SingleTickerProviderStateMixin {
  static const List itemList = [
    {'label': '积分', 'type': 'integral'},
    {'label': '刮刮乐', 'type': 'scratchers'},
    {'label': '集熊', 'type': 'bear'},
    {'label': '优惠券', 'type': 'coupon'}
  ];
  Map userInfo = {
    'fans': 10938,
    'focus': 4535435,
    'show': 23,
    'TagsLayout': ['一夜就暴富'],
    'news': 5,
    'integral': 656,
    'scratchers': 14,
    'bear': 5,
    'coupon': 11
  };
  late TabController _tabController;
  // 获取用户信息
  void getUserInfo() async {
    try {
      final res = await Api.getUserInfo();
      print('用户信息接口返回数据：${res}');
      setState(() {
        userInfo = {...userInfo, ...res};
      });
    } catch (e) {
      print(e);
    }
  }

  // 渲染用户标签
  List<Widget> _renderUserTagsLayout() {
    List<Widget> list = [];
    for (var i = 0; i < userInfo['TagsLayout'].length; i++) {
      list.add(TagsLayout(userInfo['TagsLayout'][i]));
    }
    return list;
  }

  //渲染用户信息
  List<Widget> _renderUserInfo() {
    var tempList = itemList.map((value) {
      return Column(children: [
        Text(
          '${userInfo[value['type']]}',
          style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(0, 5, 0, 0),
          child: Text(
            '${value['label']}',
            style: const TextStyle(color: Color.fromRGBO(153, 153, 153, 1)),
          ),
        ),
      ]);
    });
    return tempList.toList();
  }

  @override
  void initState() {
    super.initState();
    getUserInfo();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      children: [
        Stack(
          children: [
            Column(
              children: [
                Stack(
                  children: [
                    Image.network(
                      '${userInfo['avatar']}',
                      fit: BoxFit.cover,
                      height: 117.w,
                      width: double.maxFinite,
                    ),
                    BackdropFilter(
                      filter: ImageFilter.blur(sigmaX: 5),
                      child: Container(),
                    ),
                    Container(
                      height: 117.w,
                      decoration: const BoxDecoration(
                          color: Color.fromRGBO(118, 119, 120, .5)),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 20,
                )
              ],
            ),
            Positioned(
              bottom: 0,
              left: 20,
              child: Container(
                width: 84,
                height: 84,
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: Colors.white, width: 2),
                    borderRadius: BorderRadius.circular(42),
                    boxShadow: const [
                      BoxShadow(
                          color: Color.fromRGBO(0, 0, 0, 0.15),
                          blurRadius: 2,
                          offset: Offset(0, 2))
                    ]),
                child: CircleAvatar(
                  radius: 40,
                  backgroundImage: NetworkImage('${userInfo['avatar']}'),
                ),
              ),
            )
          ],
        ),
        Container(
          padding: const EdgeInsets.fromLTRB(20, 10, 20, 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SizedBox(
                    height: 40.w,
                    child: Container(
                      padding: EdgeInsets.fromLTRB(0, 10.w, 0, 0),
                      child: Text(
                        '${userInfo['real_name']}',
                        style: const TextStyle(
                            fontSize: 18, fontWeight: FontWeight.w800),
                      ),
                    ),
                  ),
                  Row(
                    children: [
                      Column(
                        children: [
                          SizedBox(
                            height: 40.w,
                            child: Stack(
                              children: [
                                Container(
                                  width: 44.w,
                                  height: 30.w,
                                  margin: EdgeInsets.fromLTRB(0, 10.w, 0, 0),
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(4.w),
                                      color: const Color.fromRGBO(
                                          245, 247, 249, 1)),
                                  child: const Center(
                                    child: Icon(Icons.notifications),
                                  ),
                                ),
                                Positioned(
                                    right: 0,
                                    top: 0,
                                    child: Container(
                                      width: 18.w,
                                      height: 18.w,
                                      decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(9.w),
                                          border: Border.all(
                                              color: Colors.white, width: 2),
                                          color: const Color.fromRGBO(
                                              255, 93, 52, 1)),
                                      child: Center(
                                        child: Text(
                                          '${userInfo['news']}',
                                          style: const TextStyle(
                                              color: Colors.white),
                                        ),
                                      ),
                                    )),
                              ],
                            ),
                          )
                        ],
                      ),
                      SizedBox(
                        height: 40.w,
                        child: Container(
                          width: 44.w,
                          height: 30.w,
                          margin: EdgeInsets.fromLTRB(5.w, 10.w, 0, 0),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(4.w),
                              color: const Color.fromRGBO(245, 247, 249, 1)),
                          child: const Center(child: Icon(Icons.settings)),
                        ),
                      )
                    ],
                  ),
                ],
              ),
              SizedBox(
                height: 12.w,
              ),
              Row(
                children: [
                  CountLayout('粉丝', count: '${userInfo['fans']}'),
                  CountLayout('关注', count: '${userInfo['focus']}'),
                  CountLayout('个秀', count: '${userInfo['show']}'),
                ],
              ),
              SizedBox(
                height: 12.w,
              ),
              SizedBox(
                child: Wrap(
                  spacing: 12.w,
                  runSpacing: 5,
                  runAlignment: WrapAlignment.start, // TODO 居中问题
                  children: _renderUserTagsLayout(),
                ),
              )
            ],
          ),
        ),
        const Divider(),
        Container(
            padding: const EdgeInsets.all(20),
            child: Padding(
              padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: _renderUserInfo(),
              ),
            )),
        const Divider(),
        Container(
          padding: const EdgeInsets.fromLTRB(31, 16, 31, 14),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              IconLayout('购物车', icon: Icons.shopping_cart),
              IconLayout('订单', icon: Icons.assignment),
              IconLayout('活动', icon: Icons.flag),
            ],
          ),
        ),
        Container(
          height: 10,
          decoration:
              const BoxDecoration(color: Color.fromRGBO(245, 247, 249, 1)),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(20, 14, 20, 14),
          child: Column(children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 130,
                  child: TabBar(
                      controller: _tabController,
                      indicatorColor: const Color.fromRGBO(34, 34, 34, 1),
                      indicatorSize: TabBarIndicatorSize.label,
                      labelColor: const Color.fromRGBO(51, 51, 51, 1),
                      indicatorWeight: 3,
                      indicator: MyUnderlineTabIndicator(
                        width: 12,
                        borderSide: const BorderSide(
                            width: 2, color: Color.fromRGBO(34, 34, 34, 1)),
                        borderRadius: BorderRadius.circular(1),
                      ),
                      labelStyle: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          color: Color.fromRGBO(51, 51, 51, 1)),
                      unselectedLabelStyle: const TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w100,
                          color: Color.fromRGBO(102, 102, 102, 1)),
                      tabs: const [
                        Tab(
                          height: 28,
                          child: Text(
                            '动态',
                          ),
                        ),
                        Tab(
                          height: 25,
                          child: Text(
                            '愿望',
                          ),
                        )
                      ]),
                ),
              ],
            ),
            Container(
              padding: const EdgeInsets.only(top: 20),
              height: 500,
              child: TabBarView(
                  controller: _tabController,
                  children: const [Text('动态'), Text('愿望')]),
            )
          ]),
        )
      ],
    ));
  }
}

// 用户粉丝关注 组件
class CountLayout extends StatelessWidget {
  final String text;
  final String count;
  const CountLayout(
    this.text, {
    super.key,
    required this.count,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text(
          count,
          style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(2, 0, 20, 0),
          child: Text(
            text,
            style: const TextStyle(color: Color.fromRGBO(153, 153, 153, 1)),
          ),
        ),
      ],
    );
  }
}

// 用户购物车订单 组件
class IconLayout extends StatelessWidget {
  final String text;
  final IconData icon;
  const IconLayout(
    this.text, {
    super.key,
    required this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        height: 48.w,
        width: 48.w,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(24.w),
            color: const Color.fromRGBO(245, 245, 247, 1)),
        child: Icon(icon),
      ),
      Text(text),
    ]);
  }
}

// 用户标签 组件
class TagsLayout extends StatelessWidget {
  final String text;
  const TagsLayout(this.text, {super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(5.w, 2.w, 5.w, 2.w),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: const Color.fromRGBO(245, 247, 249, 1)),
      child: Text(text),
    );
  }
}
